<!DOCTYPE html>
<html>
<head>
	<title>move</title>
	<meta charset="utf-8" />
	<style type="text/css">
		.qpBox{
			position: absolute;
			width: 1200px;
			height: 90%;
			left: 0%;
			top: 10%;
			z-index: 15;
			/*border: 1px solid #999;*/
		}
		.qpBox div{
			top: 100px;
			left: 0px;
		}
		.qpBox div,.qpBox2 div{
			position: absolute;
			width: 120px;
			height: 120px;
			border-radius: 50%;
			background-color: #f00;
			transition: all 1500ms;
		}
		.qpBox2{
			position: absolute;
			width: 600px;
			height: 90%;
			right: 10%;
			top: 10%;
			/*margin-right: -600px;*/
			z-index: 16;
		}
		.qpBox2 div{
			bottom: 100px;
			right: 0px;
		}
	</style>
</head>
<body>

	<div id="qpBox" class="qpBox">
		<div class="qp"></div>
		<div class="qp"></div>
		<div class="qp"></div>
	</div>
	<div id="qpBox2" class="qpBox2">
		<div class="qp"></div>
		<div class="qp"></div>
		<div class="qp"></div>
	</div>

	<script type="text/javascript">

	var qp = document.getElementById("qpBox").getElementsByTagName("div");
	// console.log(qp)
	var qp2 = document.getElementById("qpBox2").getElementsByTagName("div"); 


	move()
	function move() {
		for (var i = 0; i < qp.length; i++) {
			qp[i].style.left = Math.floor(Math.random() * 700) + 'px'
			qp[i].style.top = Math.floor(Math.random() * 600) + 'px'
			// qp[i].style.opacity = Math.floor(Math.random() * 10) / 10 + 0.4
			var size = 100 + Math.floor(Math.random() * 100)
			qp[i].style.width = size + 'px'
			qp[i].style.height = size + 'px'
			var rangle = Math.floor(Math.random() * 180) + 'deg'
			qp[i].style.backgroundImage = `linear-gradient(${rangle}, #ef7c7b, #d21412)`
			qp[i].style.transitionTimingFunction=`cubic-bezier( ${Math.random()}, ${Math.random()}, ${Math.random()}, ${Math.random()} )`
		}
		for (var i = 0; i < qp2.length; i++) {
			qp2[i].style.left = Math.floor(Math.random() * 600) + 'px'
			qp2[i].style.top = Math.floor(Math.random() * 500) + 'px'
			qp2[i].style.opacity = Math.floor(Math.random() * 10) / 10 + 0.4
			var size = 100 + Math.floor(Math.random() * 100)
			qp2[i].style.width = size + 'px'
			qp2[i].style.height = size + 'px'
			qp2[i].style.transitionTimingFunction=`cubic-bezier( ${Math.random()}, ${Math.random()}, ${Math.random()}, ${Math.random()} )`
		}
	}

	setInterval(move, 2000)

</script>

</body>
</html>